import $ from 'jquery';
import Module from './Module';


export default class Toolbar extends Module {
    static buttons = {};
    static pluginName = 'Toolbar';
    static addButton(btn) {
        return this.buttons[btn.prototype.name] = btn;
    }
    _init() {
        super._init();
        let floatInitialized, initToolbarFloat, toolbarHeight;
        this.editor = this._module;
        if (!this.opts.toolbar) return;
        if (!$.isArray(this.opts.toolbar)) {
            this.opts.toolbar = ['bold', 'italic', 'underline', 'strikethrough', '|', 'ol', 'ul', 'blockquote', 'code', '|', 'link', 'image', '|', 'indent', 'outdent'];
        }
        this._render();
        this.list.on('click', e => false);
        this.wrapper.on('mousedown', e => this.list.find('.menu-on').removeClass('.menu-on'));
        $(document).on(`mousedown.simditor${this.editor.id}`, (e => this.list.find('.menu-on').removeClass('.menu-on')));
        if (!this.opts.toolbarHidden && this.opts.toolbarFloat) {
            this.wrapper.css('top', this.opts.toolbarFloatOffset);
            toolbarHeight = 0;
            initToolbarFloat = () => {
                this.wrapper.css('position', 'static').width('auto');
                this.editor.util.reflow(this.wrapper);
                this.wrapper.width(this.wrapper.outerWidth());
                this.wrapper.css('left', this.editor.util.os.mobile ? this.wrapper.position().left : this.wrapper.offset().left);
                this.wrapper.css('position', '');
                toolbarHeight = this.wrapper.outerHeight();
                this.editor.placeholderEl.css('top', toolbarHeight);
                return true;
            };
            floatInitialized = null;
            $(window).on(`resize.simditor-${this.editor.id}`, e => floatInitialized = initToolbarFloat());
            $(window).on(`scroll.simditor-${this.editor.id}`, e => {
                let bottomEdge, scrollTop, topEdge;
                if (!this.wrapper.is(':visible')) return;
                topEdge = this.editor.wrapper.offset().top;
                bottomEdge = topEdge + this.editor.wrapper.outerHeight() - 80;
                scrollTop = $(document).scrollTop() + this.opts.toolbarFloatOffset;
                if (scrollTop <= topEdge || scrollTop >= bottomEdge) {
                    this.editor.wrapper.removeClass('toolbar-floating').css('padding-top', '');
                    if (this.editor.util.os.mobile) return this.wrapper.css('top', this.opts.toolbarFloatOffset);
                } else {
                    floatInitialized || (floatInitialized = initToolbarFloat());
                    this.editor.wrapper.addClass('toolbar-floating').css('padding-top', toolbarHeight);
                    if (this.editor.util.os.mobile) {
                        return this.wrapper.css('top', scrollTop - topEdge + this.opts.toolbarFloatOffset);
                    }
                }
            });
        }
        this.editor.on('destroy', ((_this => () => _this.buttons.length = 0))(this));
        return $(document).on(`mousedown.simditor-${this.editor.id}`, ((_this => e => _this.list.find('li.menu-on').removeClass('menu-on')))(this));
    }
    _render() {
        let k, len, name, ref, editor = this.editor;
        this.buttons = [];
        this.wrapper = $(this._tpl.wrapper).prependTo(this.editor.wrapper);
        this.list = this.wrapper.find('ul');
        ref = this.opts.toolbar;
        for (k = 0, len = ref.length; k < len; k++) {
            name = ref[k];
            if (name === '|') {
                $(this._tpl.separator).appendTo(this.list);
                continue;
            }
            if (!Toolbar.buttons[name]) {
                throw new Error(`simditor: invalid toolbar button ${name}`);
            }
            this.buttons.push(new Toolbar.buttons[name]({ editor }));
        }
        if (this.opts.toolbarHidden) return this.wrapper.hide();

    }
    findButton(name) {
        let button;
        button = this.list.find(`.toolbar-item-${name}`).data('button');
        return button != null ? button : null;
    }
}

Toolbar.prototype.opts = {
    toolbar: true,
    toolbarFloat: true,
    toolbarHidden: false,
    toolbarFloatOffset: 0
};
Toolbar.prototype._tpl = {
    wrapper: '<div class="simditor-toolbar"><ul></ul></div>',
    separator: '<li><span class="separator"></span></li>'
};